<template>
  <div
    :class="[
      'board-chart-wrap',
      isPreview ? 'preview-style' : 'board-configuration-wrap-style',
    ]"
    :data-id="config.id"
    ref="vbChartWrap"
    :style="{
      width: `calc(${config.width}% - ${
        config.direction === 'LD' ? 0 : config.space
      }px)`,
      height: `calc(${config.height}% - ${
        config.direction === 'LD' ? config.space : 0
      }px)`,
    }"
  >
    <div
      class="board-chart-content-wrap"
      :style="{ opacity: `${config.isMove ? 0 : 1}` }"
      @mousedown="dragMousedown"
      @mouseup="dragMouseup"
    >
      <div
        class="b-c-c-w-title"
        :class="{
          hiddenTitle:
            !showTitle(config.chartForm.chartType) || config.isHiddenTitle,
        }"
      >
        <div class="title">
          <span
            class="label"
            v-if="
              showTitle(config.chartForm.chartType) && !config.isHiddenTitle
            "
          >
            {{ chartName }}
          </span>
        </div>
      </div>
      <div
        class="b-c-c-w-chart"
        :class="{
          'kpi-style': !showTitle(config.chartForm.chartType),
          'hidden-title': config.isHiddenTitle,
        }"
      >
        <chart-components
          :key="config.id"
          :resize="resize"
          :id="config.chartForm.chartId"
          :variableConfig="config.chartForm.variableConfig"
          @variable="variable"
          @name="getName"
        ></chart-components>
      </div>

      <div class="handles-button" v-if="!isPreview">
        <commonIcon
          v-if="showTitle(config.chartForm.chartType)"
          :iconName="config.isHiddenTitle ? 'icon-kejian' : 'icon-bukejian'"
          iconType="icon"
          @click="hiddenTitle"
        ></commonIcon>
        <commonIcon
          iconName="el-icon-delete"
          iconType="icon"
          @click="deleteChart"
        ></commonIcon>
      </div>
    </div>
  </div>
</template>

<script>
import { chart } from "../dataStructure";
import ChartComponents from "@/views/screenConfig/dataComponents/graph/preview";
import elementResizeDetectorMaker from "element-resize-detector";
import commonIcon from "@/components/CommonIcon";
export default {
  name: "chart",
  components: {
    ChartComponents,
    commonIcon,
  },
  props: {
    config: {
      type: Object,
      default: chart,
    },
    isPreview: {
      type: Boolean,
      default: () => false,
    }, //全屏/预览
  },
  data() {
    return {
      resize: null,
      chartName: "",
    };
  },
  watch: {
    config: {
      handler: function (val, newVal) {
        //根据宽高重新渲染echarts图表
        if (!this.config.isMove) {
          let { width, height } = document
            .querySelectorAll(`[data-id="${this.config.id}"]`)[0]
            .getBoundingClientRect();
          this.resize = width + height;
        }
      },
      deep: true,
    },
  },
  computed: {
    showTitleStyle() {
      let reg = RegExp(/kpi-/);
      if (!val.match(reg)) {
      }
    },
  },
  methods: {
    //隐藏标题
    hiddenTitle() {
      console.log(123);
      // this.config.isHiddenTitle = true;
      console.log(this.config);
      this.$set(this.config, "isHiddenTitle", !this.config.isHiddenTitle);
    },
    //删除图表
    deleteChart() {
      this.$nextTick(() => {
        this.$emit("deleteComponents", this.config);
      });
    },
    variable(data) {
      let variable =
        data.variable && JSON.parse(data.variable).length
          ? JSON.parse(data.variable)
          : [];
      this.$set(this.config.chartForm, "variableData", variable);
    },
    //显示标题
    showTitle(val) {
      let reg = RegExp(/kpi-/);
      return !val.match(reg);
    },
    //获取名称
    getName(info) {
      this.chartName = info.name;
      if (info.name !== this.config.chartForm.chartName) {
        this.$set(this.config.chartForm, "chartName", info.name);
      }
    },
    //拖拽组件
    dragMousedown() {
      this.$emit("dragMousedown", "chart", this.config);
    },
    dragMouseup() {
      this.$emit("dragMouseup", "chart", this.config);
    },
  },
  mounted() {
    // 监听图表dom大小变化，修改resize值重新渲染eCharts或者table大小
    let erd = elementResizeDetectorMaker();
    erd.listenTo(
      document.querySelectorAll(`[data-id="${this.config.id}"]`)[0],
      (element) => {
        this.$nextTick(() => {
          let { x, y, width, height } = element.getBoundingClientRect();
          if (!this.config.isMove) {
            this.resize = x + y + width + height;
          }
        });
      }
    );
  },
};
</script>

<style scoped lang="scss">
.board-chart-wrap {
  position: relative;
  color: #606266;
  font-size: 14px;

  .board-chart-content-wrap {
    width: 100%;
    height: 100%;
    border: 1px solid #ebeef5;
    box-sizing: border-box;
    background: #ffffff;
    border-radius: 4px;
    position: relative;

    .b-c-c-w-title {
      position: relative;
      height: 48px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: move;
      border-bottom: 1px solid #eee;
      padding: 16px 12px;

      .title {
        width: calc(100% - 26px);
        display: flex;
        align-items: center;
        color: #000000;
        font-size: 16px;

        .label {
          width: 100%;
          word-break: keep-all;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          font-size: 15px;
        }
      }
    }

    .handles-button {
      display: flex;
      align-items: center;
      opacity: 0;
      position: absolute;
      right: 12px;
      top: 20px;

      i {
        cursor: pointer;
        font-weight: bold;

        margin-left: 8px;

        &.el-icon-edit:hover {
          color: #409eff;
        }

        &.el-icon-delete:hover {
          color: #f56c6c;
        }
      }
    }
    .hiddenTitle {
      height: 0;
      padding: 0;
      border: none;
    }
  }
}

.b-c-c-w-chart {
  cursor: default;
  box-sizing: border-box;
  height: calc(100% - 55px);
  padding: 12px;
}

.kpi-style {
  height: 100%;
  padding: 20px;
  ::v-deep .error-image-style {
    width: 70px !important;
    margin-left: 50px !important;
  }
  ::v-deep .error-message-wrap {
    font-size: 14px !important;
    margin: 4px 0 0 30px !important;
  }
  ::v-deep .error-describe-wrap {
    font-size: 12px !important;
    margin: 4px 0 0 30px !important;
  }
}
.hidden-title {
  height: 100%;
}

.board-configuration-wrap-style {
  &:hover {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

    .board-chart-content-wrap {
      .handles-button {
        opacity: 1 !important;
      }
    }
  }
}

.preview-style {
  .board-chart-content-wrap {
    .b-c-c-w-title {
      cursor: default;
    }
  }
}
</style>
